
<template>
  <div class="alarm-container">
    <!-- 主要内容main -->
    <el-main v-show="true">
      <el-row :gutter="20">
        <!-- 左侧 -->
        <el-col :span="6" class="echarts_left">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>告警统计</span>
              </div>
            </template>
            <div style="display: flex; justify-content: space-around; margin-top: 10px;">
              <div ref="seriousChartRef" style="width:100%; height: 100px;"></div>
              <div ref="mediumChartRef" style="width: 100%; height: 100px;"></div>
              <div ref="generalChartRef" style="width: 100%; height: 100px;"></div>
            </div>
            <div class="warnTotal">
              <div>告警类型统计</div>
              <div>告警总数:{{total}} 个</div>
            </div>
            <div class="card-body" ref="overviewRef">
              <div ref="stackedBarChartRef" style="height: 240px;"></div>
            </div>
          </el-card>


          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>农舍告警</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="eleDayChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
              style="padding:8px;height: 480px;"
            ></div>
          </el-card>
        </el-col>
        <!-- 主视觉 -->
        <el-col :span="12" class="main_view">
          <div class="main-house">
            <el-select
              v-model="value"
              placeholder="请选择农场"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="6" class="echarts_right">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>实时统计</span>
              </div>
            </template>
            <div class="warn">
              <div class="warn_info">
                <div>
                  <img :src="warnLogo"/>
                </div>
                <div>
                  <div class="warn-number">0  个</div>
                  <div>今日预警</div>
                </div>
              </div>
              <div class="warn_info">
                <div>
                  <img :src="warningLogo"/>
                </div>
                <div>
                  <div class="warn-number">0  个</div>
                  <div>今日预警</div>
                </div>
              </div>
            </div>
            
            <div
              class="card-body"
              ref="deviceEleChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
              style="height: 200px;"
            ></div>
          </el-card>


          <el-card style="max-width: 480px;">
            <template #header>
              <div class="card-header">
                <span>告警处理</span>
              </div>
            </template>
            <div class="card-body" ref="waterChartRef">
              <div style="height: 480px">
              <dv-scroll-board 
                :config="config" 
                @mouseover="mouseoverHandler" 
                @click="clickHandler"
                style="margin-top: 10px;padding: 8px"
              />
            </div> 
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-main>
  </div>
</template>

<script setup name="Alarm">
import * as echarts from 'echarts'
import { onMounted, ref, watch, watchEffect, reactive, onUnmounted, computed } from 'vue'
import warnLogo from '@/assets/imgs/iot/报警.png'
import warningLogo from '@/assets/imgs/iot/警告.png'
const router = useRouter()

/** getCurrentInstance使用注意点
 * getCurrentInstance 只能在 setup 或生命周期钩子中使用
 * getCurrentInstance线上环境报错问题: 使用proxy代替ctx,proxy线上不会出现问题
 * 在vue3中不推荐使用getCurrentInstance获取组件实例
 * 如果是获取dom大家可以通过ref获取
 * 至于其他的一些常用属性和方法，vue3中的setup中提供了props和contexts上下文
 */
const { proxy } = getCurrentInstance()

/** 创建一个响应式变量currentTime，初始值为空字符串 */

const activeIndex = ref('1')

const data = reactive({
  weatherList: {}
})
const fullscreenLoading = ref(true)
const stackedBarChartRef = ref(null); // 告警统计
const seriousChartRef = ref(null);//饼图
const mediumChartRef = ref(null);//饼图
const generalChartRef = ref(null);//饼图
const eleDayChartRef = ref(null);//农舍告警

const { weatherList } = toRefs(data)
const deviceEleChartRef = ref(null);//实时统计
const config = reactive({
  header: ['名称', '告警信息', '告警事件','持续时间'],
  data: [
    ['gx001', '高温告警', '2025-03-15 15:36','1min'],
    ['gx002', '高温告警', '2025-03-16 15:36','1min'],
    ['gx001', '负压偏高', '2025-03-17 15:36','1min'],
    ['gx003', '负压过低', '2025-03-18 15:36','1min'],
    ['gx001', '负压偏高', '2025-03-19 15:36','1min'],
    ['gx004', '高温告警', '2025-03-20 15:36','1min'],
    ['gx001', '负压偏高', '2025-04-17 15:36','1min'],
    ['gx003', '负压过低', '2025-04-18 15:36','1min'],
    ['gx001', '负压偏高', '2025-04-19 15:36','1min'],
  ],
  index: false,
  columnWidth: [100,120,150,120],
  align: ['center'],
  oddRowBGC:['546FC6'],//奇数行颜色
  evenRowBGC:['#4263A8'],//偶数行颜色
})

const value = ref('广兴01舍')
const options = [
  {
    value: 'Option1',
    label: '广兴01舍',
  },
  {
    value: 'Option2',
    label: '广兴02舍',
  },
  {
    value: 'Option3',
    label: '广兴03舍',
  },
  {
    value: 'Option4',
    label: '广兴04舍',
  },
  {
    value: 'Option5',
    label: '广兴05舍',
  },
]

const handleCommand =()=>{
  
}
const mouseoverHandler =()=>{
  
}
const clickHandler =()=>{
  
}

// 计算总告警数
const total = computed(() => {
  return pieData[0].value + pieData[1].value + pieData[2].value;
});
//告警统计
const pieData = [
  { name: '严重', value: 32, max: 100 },
  { name: '中等', value: 45, max: 100 },
  { name: '一般', value: 65, max: 100 },
];
const drawPieChart = (chartRef, value, max, name,color) => {
  const rate = Math.round((value));
  const option = {
    title: [
      {
        text: `{a|${name}}\n{b|${rate}}`,
        show: true,
        x: 'center',
        y: 'center',
        textStyle: {
          rich: {
            a: {
              fontSize: 10,
              color: '#ffffff',
              padding: [0, 0, 10, 0],
            },
            b: {
              fontSize: 12,
              color: '#ffffff',
              fontFamily: 'alibabaPuhuiM',
            },
          },
        },
      },
    ],
    polar: {
      center: ['50%', '50%'],
      radius: ['60%', '75%'],
    },
    angleAxis: {
      max: max,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(19, 84, 146, .4)',
        },
        data: [value],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color:color
          },
        },
      },
      {
        name: '',
        type: 'gauge',
        radius: '54%',
        axisLine: {
          lineStyle: {
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(0, 182, 253, 0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0, 182, 253, .2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 182, 253, .4)',
                  },
                ]),
              ],
            ],
            width: 1,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        itemStyle: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [],
        pointer: {
          show: false,
        },
      },
    ],
  };

  const pieChartInstance = echarts.init(chartRef.value);
  pieChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    pieChartInstance.resize();
  });
};

const seriesData = [
  {
    name: '一般',
    data: [89, 50, 141,10]
  },
  {
    name: '中等',
    data: [73, 65, 67,10]
  },
  {
    name: '严重',
    data: [116, 343, 103,10]
  },
];
// 告警统计
const drawStackedBarChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      name: '战争次数',
      type: 'value',
      axisLabel: {
        color: "#fff"
      }
    },
    yAxis: {
      name: '类型',
      type: 'category',
      data: ['环控系统', '分选系统', '发酵系统', '监控系统']
    },
    axisLabel: {
      color: '#fff' // 将 y 轴文字颜色设置为白色
    },
    nameTextStyle: {
      color: '#fff' // 将 y 轴名称颜色设置为白色
    },
    series: seriesData.map(item => ({
      name: item.name,
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      emphasis: {
        focus: 'series'
      },
      data: item.data
    })),
  };

  const stackedBarChartInstance = echarts.init(stackedBarChartRef.value);
  stackedBarChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    stackedBarChartInstance.resize();
  });
};

// 实时统计
const drawDeviceEleChart = () => {
  let series = [];
  let pieDatas = [
    { "value": 22, "name": "环控系统" },
    { "value": 58, "name": "分选系统" },
    { "value": 3, "name": "监控系统" },
    { "value": 5, "name": "供配电系统" },
    { "value": 97, "name": "发酵系统" },
  ];

  let maxRadius = 90,
      barWidth = 6,
      barGap = 8;

  let barColor = [
    "rgba(86,147,255,1)",
    "rgba(0, 255, 255, 1)",
    "rgba(255, 201, 95, 1)",
    "#d4364f",
    "#2cb299"
  ];

  pieDatas.forEach((item, i) => {
    series.push({
      type: 'pie',
      clockwise: false, // 顺时加载
      hoverAnimation: true, // 鼠标移入变大
      radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
      center: ["30%", "50%"],
      label: { 
        show: false 
      },
      tooltip: {
        show: true, // 显示 tooltip
        formatter: function (params) {
          return `${params.name}: ${params.value}%`;
        }
      },
      data: [{
        value: item.value,
        name: item.name,
        itemStyle: { color: barColor[i] }
      }, {
        value: 100 - item.value,
        name: '',
        itemStyle: { color: "transparent" },
        tooltip: { show: false },
        hoverAnimation: false // 透明部分不需要动画
      }]
    });
  });

  const option = {
    grid: {
      top: '30%',
      bottom: '54%',
      left: "10%",
      containLabel: false
    },
    tooltip: { 
      show: false // 不在此处显示 tooltip，使用 pie 的 tooltip
    },
    xAxis: [{ show: false }],
    yAxis: [{
      type: 'category',
      inverse: true,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        inside: true,
        textStyle: { color: "#fff", fontSize: 14 },
        margin: 195,
        show: true
      },
    }],
    legend: {
      show: true,
      orient: "vertical",
      top: '5%',
      right: '5%',
      icon: 'circle',
      itemWidth: 12,
      itemGap: 20,
      data: pieDatas.map(x => x.name), // 从 pieDatas 获取名称
      textStyle: { fontSize: 14, color: '#fff' },
    },
    series: series,
  };

  const deviceEleChartInstance = echarts.init(deviceEleChartRef.value);
  deviceEleChartInstance.setOption(option);

  window.addEventListener("resize", () => {
    deviceEleChartInstance.resize();
  });
};

const eggRateData = {//农舍告警
  time: ["4", "8", "12", "16", "20", "24"],
  data1: [5, 9, 4, 5, 4, 2], 
  data2: [2, 5, 2, 5, 8, 2],
  data3: [2, 5, 1, 5, 8, 6],
};
const drawEggRateChart = () => {
  const option = {
    title: {
      text: "(单位:次)",
      textStyle: {
        color: "#fff",
        fontSize: 10,
      },
    },
    legend: {
      show: true,
      data: ["严重", "中等", "一般"],
      textStyle: {
        color: "#fff",
      },
      orient: "horizontal",
      right: "5%",
    },
    grid: {
      top: 30,
      left: 30,
      right: 30,
      bottom: 60,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      backgroundColor: "rgba(9, 24, 48, 0.5)",
      borderColor: "rgba(75, 253, 238, 0.4)",
      textStyle: {
        color: "#FFF",
      },
    },
    xAxis: {
      type: "category",
      data: eggRateData.time,
      axisLine: {
        lineStyle: {
          color: "rgba(60,132,163,0.4)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "#fff",
        fontSize: 10,
      },
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#FFF",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(60,132,163,0.2)",
        },
      },
    },
    series: [
      {
        name: "严重",
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#299a93" },
            { offset: 1, color: "rgba(98,74,0,0)" },
          ]),
        },
        lineStyle: {
          width: 2,
          color: "#299a93",
        },
        showSymbol: false,
        data: eggRateData.data1,
      },
      {
        name: "中等",
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#146fd7" },
            { offset: 1, color: "rgba(20, 111, 215,0)" },
          ]),
        },
        lineStyle: {
          width: 2,
          color: "#146fd7",
        },
        showSymbol: false,
        data: eggRateData.data2,
      },
      {
        name: "一般",
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#f39c12" },
            { offset: 1, color: "rgba(243, 156, 18, 0)" },
          ]),
        },
        lineStyle: {
          width: 2,
          color: "#f39c12",
        },
        showSymbol: false,
        data: eggRateData.data3,
      },
    ],
  };

  const eggRateChartInstance = echarts.init(eleDayChartRef.value);
  eggRateChartInstance.setOption(option);

  // 窗口大小改变时，图表大小自适应
  window.addEventListener("resize", () => {
    eggRateChartInstance.resize();
  });
};



onMounted(() => {
  drawDeviceEleChart();
  drawEggRateChart();//农舍告警
  drawStackedBarChart(); // 告警统计
  drawPieChart(seriousChartRef, pieData[0].value, pieData[0].max, pieData[0].name,'#f7c319');
  drawPieChart(mediumChartRef, pieData[1].value, pieData[1].max, pieData[1].name,'#1b8ffd');
  drawPieChart(generalChartRef, pieData[2].value, pieData[2].max, pieData[2].name,'#22d0f1');
})

</script>

<style scope lang="scss">
.alarm-container {
  height: 87%;
  width: 100%;
  .el-main {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    // background-color: yellow;
    padding: 15px;
    .el-row {
      height: 100%;
    }
    .el-card {
      color: #fff;
      // height: 100%;
      background: linear-gradient(180deg, #001e54 0%, rgba(4, 51, 132, 0.29) 100%);
      .el-card__header {
        padding: 0 !important;
        min-height: 28px;
        .card-header {
          font-size: 20px;
          min-height: 36px;
          padding: 0 0 0 16px;
          display: flex;
          align-items: center;
          span{
            color: #409eff;
            font-weight: bold;
          }
        }
      }
      .el-card__body {
        padding: 0 !important;
        height: calc(100% - 28px);
        min-height: calc(100% - 28px);
        .card-body {
          height: 100%;
          .overview-video {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .echarts_left {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .warnTotal{
        display: flex;
        justify-content: space-between;
        margin: 10px 5%;
      }
    }
    .main_view {
      margin-top: 10px;
      .main-house{
        background-color: skyblue;
        margin: 0 40%;
      }
      .cont-list {
        display: flex;
        background: rgba(36, 54, 111, 0.9);
        box-shadow: 0 4px 10px #0000001d;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        position: relative;
        .cont-item {
          display: flex;
          .cont-item-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            img {
              width: 44px;
              height: 44px;
              object-fit: contain;
            }
            span {
              font-size: 18px;
              font-weight: 500;
              color: #fff;
              line-height: 25px;
            }
          }
          .cont-item-right {
            padding-left: 20px;
            .day {
              font-size: 22px;
              font-weight: 700;
              color: #fff;
              line-height: 26px;
            }
            .data {
              font-size: 32px;
              font-weight: 700;
              color: #fff;
              line-height: 33px;
              padding-top: 10px;
            }
            .unit {
              font-size: 22px;
              font-weight: 600;
              color: #b6c1c4;
              line-height: 26px;
              padding-left: 10px;
            }
          }
        }
      }
    }
    .echarts_right {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .warn{
        display: flex;
        justify-content: space-between;
        margin: 10px 15px;
        .warn_info{
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 10px;
          padding: 10px;
          img{
            height: 40px;
            width: 40px;
            margin-right: 10px;
          }
          .warn-number{
            color: #409eff;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
